<!-- 评论组件 -->
<template>
	<view class="commentBox">
		<!-- 评论区域展示 -->
		<view class="top">
			<h4 id="goHere">最新评论</h4>
			<view class="noComment" v-if="commentList.length === 0">暂无评论</view>
			<view class="commentItem" v-for="item in commentList" :key="item.id">
				<image :src="item.avatar" mode=""></image>
				<view class="userBox">
					<view class="name">{{item.userName}}</view>
					<view class="info">{{item.body}}</view>
					<view class="time">{{item.created_at}} 评论</view>
				</view>
			</view>
		</view>
		<!-- 底部评论 -->
		<view class="buttom">
			<view class="dialog" @click="speak">说点什么...</view>
			<view class="icon">
				<view class="like" @click="changeLike(type)">
					<!-- 推荐 -->
					<image v-if="type==='newFeed' && feedInfoClone.has_like" class="img" src="../../static/images/lover.png" mode=""></image>
					<image v-if="type==='newFeed' && !feedInfoClone.has_like" class="img" src="../../static/images/love.png" mode=""></image>
					<text v-if="feedInfoClone.like_count > 0 && type == 'newFeed'">{{feedInfoClone.like_count}}</text>
					<text v-if="feedInfoClone.like_count <= 0 && type == 'newFeed'">点赞</text>
					
					<!-- 资讯 -->
					<image v-if="type==='newDetail' && newInfoClone.has_like" class="img" src="../../static/images/lover.png" mode=""></image>
					<image v-if="type==='newDetail' && !newInfoClone.has_like" class="img" src="../../static/images/love.png" mode=""></image>
					<text v-if="newInfoClone.digg_count > 0 && type == 'newDetail'">{{newInfoClone.digg_count}}</text>
					<text v-if="newInfoClone.digg_count <= 0 && type == 'newDetail'">点赞</text>
				</view>
				<view class="message" @click="gotoComment">
					<image class="img" src="../../static/images/msg.png" mode=""></image>
					<text v-if="commentList.length > 0">{{commentList.length}}</text>
					<text v-if="commentList.length <= 0">评论</text>
				</view>
			</view>
		</view>
		<!-- 发表评论盒子 -->
		<view class="reviewBox" v-if="showTextArea">
			<view class="titleBox">
				<view class="title">发表评论</view>
				<u-icon size="30" name="arrow-down-fill" color="#999999" @click="closeComment"></u-icon>
			</view>
			<u-input 
				v-model="value" 
				type="textarea" 
				border 
				height='200' 
				auto-height='true'
				placeholder="想说点什么..."
				@input='review'
			/>
			<view class="btn">
				<u-button type="primary" :disabled="isdisabled" size="mini" @click="publish">发布</u-button>
				<u-button size="mini" style="margin-left: 5upx;" @click="closeComment">取消</u-button>
			</view>
		</view>
		<login v-if="!loginState" ref="login"></login>
	</view>
</template>

<script>
	import filterTime from '@/components/utils/filterTime.js'
	import {mapState} from 'vuex'
	export default {
		props:{
			type: String,
			newInfo: Object,
			feedInfo: Object
		},
		computed:{
			...mapState(['loginState', 'userInfo'])
		},
		data() {
			return {
				commentList: [],
				// 输入框的内容
				value:'',
				// 发表评论框显示隐藏
				showTextArea: false,
				// 是否隐藏
				isdisabled: true,
				newInfoClone:{},
				feedInfoClone:{}
				
			};
		},
		created() {
			this.newInfoClone = this.newInfo
			this.feedInfoClone = this.feedInfo
			console.log(this.newInfoClone)
			console.log(this.feedInfoClone)
			// 如果feedId存在
			if (this.feedInfoClone) {
				this.getFeedComments()
			} else if (this.newInfoClone) {
				this.getNewComments()
			}
		},
		methods:{
			// 获取推荐的评论
			async getFeedComments() {
				let {data} = await this.$u.api.getFeedComments({
					id: this.feedInfoClone.id
				})
				let commentList = data.comments
				this.commentList = commentList.map(item => {
					return {
						...item,
						created_at: filterTime(item.created_at),
						userName: item.user.name,
						avatar: item.user.avatar ? item.user.avater : '../../static/images/nopic.png'
					}
				})
			},
			// 获取资讯的评论
			async getNewComments() {
				let {data} = await this.$u.api.getNewComments({
					id: this.newInfoClone.id, 
				})
				let commentList = data.comments
				this.commentList = commentList.map(item => {
					return {
						...item,
						created_at: filterTime(item.created_at),
						userName: item.user.name,
						avatar: item.user.avatar ? item.user.avater : '../../static/images/nopic.png'
					}
				})
			},
			// 说点什么
			speak () {
				this.showTextArea = true
			},
			// 关闭评论
			closeComment () {
				this.showTextArea = false
				this.value = ''
			},
			// 评论
			review (e) {
				if(e){
					this.isdisabled = false
				}else{
					this.isdisabled = true
				}
			},
			// 发布
			async publish () {
				// 判断是否登录
				if (!this.loginState) {
					this.$refs.login.openLogin()
				}
				if(this.type==="newFeed") {
				// 当前为推荐页面
					let {data} = await this.$u.api.getFeedComment({
						id: this.feedInfoClone.id,
						body: this.value
					})
					if (data && data.comment) {
						// 将新添的数据在页面中显示出来
						this.commentList.unshift({
							created_at: filterTime(data.comment.created_at),
							body: data.comment.body,
							userName: this.userInfo.name,
							avatar: this.userInfo.avatar ? this.userInfo.avatar : '../../static/images/nopic.png'
						})
						uni.showToast({
							title: data.message,
						})
					} else { 
						uni.showToast({
							title: '评论失败',
							icon:"none"
						})
					}
				} else {
					// 当前为资讯页面
					let {data} = await this.$u.api.getNewComment({
						id: this.newInfoClone.id,
						body: this.value
					})
					if (data && data.comment) {
						this.commentList.unshift({
							created_at: filterTime(data.comment.created_at),
							body: data.comment.body,
							userName: this.userInfo.name,
							avatar: this.userInfo.avatar ? this.userInfo.avatar : '../../static/images/nopic.png'
						})
						uni.showToast({
							title: data.message,
						})
					} else {
						uni.showToast({
							title: '评论失败',
							icon:"none"
						})
					}
				}
				this.closeComment()
			},
			// 跳转到评论
			gotoComment () {
				const query = uni.createSelectorQuery().in(this);
				query.select('#goHere').boundingClientRect(data => {
				  uni.pageScrollTo({
				      scrollTop: data.top,
				      duration: 0
				  });
				}).exec();
			},
			//改变点赞或取消点赞
			async changeLike (type) {
				// 当type为newFeed时, 改变当前推荐页面详情的点赞或取消点赞
				if (type==="newFeed") {
					if (!this.feedInfoClone.has_like) {
						let res = await this.$u.api.getFeedLike({
							id:this.feedInfoClone.id
						})
						if (res.statusCode === 201 && res.data.message === '操作成功'){
							this.$nextTick(() => {
								this.feedInfoClone.has_like = true
								this.feedInfoClone.like_count +=1
								// 触发index的getIndexFeed
								uni.$emit('getIndexFeed', this.feedInfoClone)
								uni.$emit('getMineFeed', this.feedInfoClone)
							})
							uni.showToast({
								title:'点赞成功'
							})
							
						} else {
							
							uni.showToast({
								title:'点赞失败',
								icon: "none"
							})
						}
					} else {
						let res = await this.$u.api.getFeedUnlike({
							id:this.feedInfoClone.id
						})
						if (res.statusCode === 204) {
							this.$nextTick(() => {
								this.feedInfoClone.has_like = false
								this.feedInfoClone.like_count -=1
								uni.$emit('getIndexFeed', this.feedInfoClone)
								uni.$emit('getMineFeed', this.feedInfoClone)
							})
							uni.showToast({
								title:'取消点赞成功'
							})
						} else{
							uni.showToast({
								title:'取消点赞失败',
								icon: "none"
							})
						}
					}
				}
				// 当type为newDetail时, 改变当前资讯页面详情的点赞或取消点赞
				if (type==='newDetail') {
					console.log(type, this.newInfoClone.id)
					if (!this.newInfoClone.has_like) {
						let res = await this.$u.api.getNewLike({
							id:this.newInfoClone.id
						})
						console.log(res)
						if (res.statusCode === 201){
							this.$nextTick(() => {
								this.newInfoClone.has_like = true
								this.newInfoClone.digg_count +=1
							})
							uni.showToast({
								title:'点赞成功'
							})
							
						} else {
							
							uni.showToast({
								title:'点赞失败',
								icon: "none"
							})
						}
					} 
					else {
						let res = await this.$u.api.getNewUnlike({
							id:this.newInfoClone.id
						})
						if (res.statusCode === 204) {
							this.$nextTick(() => {
								this.newInfoClone.has_like = false
								this.newInfoClone.digg_count -=1
							})
							uni.showToast({
								title:'取消点赞成功'
							})
						} else{
							uni.showToast({
								title:'取消点赞失败',
								icon: "none"
							})
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.top{
	padding: 20upx 20upx 100upx;
	min-height: 700upx;
	h4{
		font-weight: 700;
		font-size: 32upx;
		margin-bottom: 40upx;
	}
	.noComment{
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.commentItem{
		display: flex;
		justify-content: flex-start;
		margin-bottom: 10upx;
		image{
			width: 50upx;
			height: 50upx;
		}
		.userBox{
			margin-left: 20upx;
			flex: 1;
			border-bottom: 1px solid #f2f2f2;
			.name{
				font-weight: 600;
				margin-bottom: 25upx;
				font-size: 24upx;
			}
			.info{
				margin-bottom: 15upx;
				font-size: 30upx;
			}
			.time{
				color: #999;
				font-size: 24upx;
				margin-bottom: 20upx;
			}
		}
	}
}
// 底部评论区
.buttom{
	margin-top: 20upx;
	width: 100%;
	height: 120upx;
	position: fixed;
	left: 0;
	bottom: 0;
	border-top: 1px solid #f6f6f6;
	display: flex;
	align-items: center;
	background-color: #fff;
	.dialog{
		width: 440upx;
		height: 60upx;
		background-color: #eee;
		padding-left: 30upx;
		line-height: 60upx;
		font-size: 24upx;
		color: #aaa;
		border-radius: 20upx;
		margin-left: 10rpx;
	}
	.icon{
		height: 40upx;
		display: flex;
		margin-left: 30rpx;
		align-items: center;
	}
	.img{
		width: 36upx;
		height: 36upx;
		vertical-align: middle;
		margin-right: 10upx;
	}
	.like,
	.message{
		width: 120upx;
	}
}
.reviewBox{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 500upx;
	padding: 20upx 30upx 0 50upx;
	background-color: #fafafa;
	.titleBox{
		margin-bottom: 20upx;
		display: flex;
		justify-content: space-between;
		.title{
			font-size: 28upx;
			color: #999;
			font-weight: 700;
		}
	}
	.btn{
		margin-top: 20upx;
		display: flex;
		justify-content: flex-end;
		cursor: pointer;
	}
}
</style>
